<template>
  <div>
    <!--页头-->
    <page-header></page-header>
    <el-row>
      <el-col :span="18">
        <!--店铺卡片详情-->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span class="text">{{ restaurant.restaurantName }}</span>
            <i style="color: red;" :class="iconClass" @click="handleCollection"></i>
          </div>
          <el-row>
            <el-col :span="6">
              <div>
                <el-image
                    fit="cover"
                    style="width: 250px; height:250px;"
                    :src="restaurant.restaurantImg"
                    :preview-src-list="[restaurant.restaurantImg]">
                </el-image>
              </div>
            </el-col>
            <el-col :span="18">
              <div>
                <el-descriptions :column="1" size="medium" border>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-tickets"></i>
                      描述:
                    </template>
                    {{ restaurant.description }}
                  </el-descriptions-item>

                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-office-building"></i>
                      地址:
                    </template>
                    {{ restaurant.address }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-money"></i>
                      餐盒费用:
                    </template>
                    {{ restaurant.boxCost }}元
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-user"></i>
                      联系人:
                    </template>
                    {{ restaurant.ownerName }}
                  </el-descriptions-item>

                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-mobile-phone"></i>
                      联系电话:
                    </template>
                    {{ restaurant.mobile }}
                  </el-descriptions-item>

                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-message"></i>
                      联系邮箱:
                    </template>
                    {{ restaurant.email }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </el-col>
          </el-row>
        </el-card>
        <el-divider></el-divider>
        <!--店铺菜品卡片列表: 循环-->
        <div v-for="food in foodList" :key="food.id">
          <el-card shadow="hover">
            <el-row>
              <el-col :span="4">
                <!--菜品图片-->
                <div class="food-image">
                  <el-image
                      style="width: 180px;height: 180px;margin-top: 50px;"
                      fit="cover"
                      :src="food.cover"
                      :preview-src-list="[food.cover]">
                  </el-image>
                </div>
              </el-col>
              <el-col :span="20">
                <el-descriptions :title="food.title" :column="1" size="medium" border>
                  <template slot="extra">
                    <el-button type="primary" size="small" @click="addToCart(food)">添加到包裹</el-button>
                  </template>

                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-ice-tea"></i>
                      菜品类别:
                    </template>
                    <el-tag v-for="cate in cateList" v-if="food.cateId===cate.id">{{ cate.name }}</el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-tickets"></i>
                      描述:
                    </template>
                    {{ food.description }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-money"></i>
                      价格:
                    </template>
                    {{ food.price }}元
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-coin"></i>
                      销量:
                    </template>
                    {{ food.totalSales }}
                  </el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <!--购物车-->
        <el-row style=" position: fixed;top: 15%; right: 5%">
          <cart ref="cart" style="float: right"
                :cart-list="cartList"
                v-on:to-pay="showOrderForm"
                v-on:reset-cart="resetCartList"></cart>
          <br/>
        </el-row>
        <!--        &lt;!&ndash;评论&ndash;&gt;
                <el-row>
                  <div style="height: 500px">
                    <el-scrollbar style="height: 100%">
                      <el-card class="box-card">
                        <div slot="header" class="clearfix">
                          <span>评价</span>
                        </div>
                        <div v-for="comment in comments" :key="comment.id">
                          <comment :comment="comment"></comment>
                        </div>
                      </el-card>
                    </el-scrollbar>
                  </div>
                </el-row>-->
      </el-col>
    </el-row>

    <!--订单详情-->
    <order-form-dialog :dialog-visible="orderVisible"
                       :food-list="orderList"
                       :restaurant="restaurant"
                       v-on:close-order="closeOrderForm"
                       v-on:reset-cart="resetCartList">
    </order-form-dialog>

  </div>
</template>

<script>
import pageHeader from '../../components/PageHeader';
import cart from '../../components/Cart';
import orderFormDialog from '../../components/OrderFormDialog';
import RestaurantCard from "../../components/restaurant/RestaurantCard";
import Comment from "../../components/restaurant/Comment";

export default {
  components: {
    Comment,
    RestaurantCard,
    pageHeader,
    cart,
    orderFormDialog
  },
  props: {
    shopId: null,
  },
  data() {
    return {
      orderVisible: false,    //订单表单可见性
      iconClass: "el-icon-star-off",
      // 店铺详情
      restaurant: {
        restaurantImg: ''
      },
      // 餐品列表
      foodList: [],
      // 类别列表
      cateList: [],
      // 购物车列表
      cartList: [],
      // 订单餐品列表
      orderList: [],
      totalPrice: Number,
      //需要从服务端获取
      comments: [],

      isCollection: Boolean
    }
  },
  // 初始化
  created() {
    // 初始化
    this.$axios({
      method: "get",
      url: "/rest/init",
      params: {
        id: this.shopId,
        userId: this.$store.getters.uid
      }
    }).then(response => {
      if (response.data.success) {
        this.restaurant = response.data.restaurant;
        this.foodList = response.data.food_list;
        this.cateList = response.data.cate_list;
        this.comments = response.data.rest_comments_list;
        this.isCollection = response.data.isCollection;
      }
      if (this.isCollection) {
        this.iconClass = "el-icon-star-on";
      }
    }).catch(error => console.log(error));
  },
  methods: {
    //关闭弹框
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    //添加到包裹
    addToCart: function (food) {
      var flag = false;
      //操纵子组件的data
      for (var item of this.cartList) {
        if (item.id === food.id) {
          flag = true;
        }
      }
      if (!flag) {
        this.cartList.push({id: food.id, title: food.title, count: 1, price: food.price});
      }
    },
    //显示订单
    showOrderForm: function (enlargeAmount) {
      this.orderVisible = true;
      this.orderList = enlargeAmount;   //传入所选餐品
    },
    //关闭订单表单
    closeOrderForm: function () {
      this.orderVisible = false;
      this.resetCartList();
    },
    //重置购物包裹
    resetCartList() {
      this.cartList = [];
    },
    // 收藏店铺
    handleCollection: function () {
      if (this.iconClass === "el-icon-star-off") {
        // 收藏
        this.$axios({
          method: "post",
          url: "/user/subscribe",
          data: {
            userId: this.$store.getters.uid,
            restaurantId: this.restaurant.id
          }
        })
            .then(response => {
              if (response.data.success) {
                this.iconClass = "el-icon-star-on";
              }
            })
            .catch(error => console.log(error))
      } else if (this.iconClass === "el-icon-star-on") {
        // 取消收藏
        this.$confirm("确认取消收藏本店铺?")
            .then(() => {
              this.$axios({
                method: "post",
                url: "/user/cancelsub",
                data: {
                  userId: this.$store.getters.uid,
                  restaurantId: this.restaurant.id
                }
              })
                  .then(response => {
                    if (response.data.success) {
                      this.iconClass = "el-icon-star-off";
                    }
                    console.log(response.data.message);
                  })
                  .catch(error => console.log(error))
            })

      }
    }
  }
}
</script>

<style scoped>

</style>
